<template>
  <Table border :columns="columns" :data="data"  row-key="1" :height="400">

    <template #status="{ row, index }">
      <DotTag type="primary" v-if="!row.locked">正常</DotTag>
      <DotTag type="error" v-else>已锁</DotTag>
    </template>

    <template #footer>
      <VanPagination v-model="page" :items-per-page="pageSize"
             :total-items="total" @page-click="showData"
             :show-page-size="5" force-ellipses />
    </template>

  </Table>
</template>

<script setup>

import { ref, defineProps, onMounted } from 'vue' ;
import API from '../api/index.js'
import VanPagination from "./VanPagination.vue";
import DotTag from "./DotTag.vue";

const data = ref([]) ;

const columns = ref([
  {type: "index", width: 50} ,
  {title: '用户名', key: "username"} ,
  {title: '真实姓名' , key: "realName"} ,
  {title: '手机号', key: "tel", width: 130} ,
  {title: '电子邮箱' , key: "email"} ,
  {title: '锁定状态' , slot: "status", width: 100} ,
  {title: '录入时间' , key: "createTime"}
])

const page = ref(1) ;
const pageSize = ref(5);
const total = ref(0) ;

const prop = defineProps({
   departId: {
      type: Number,
      required: true
   }
})

function showData() {
  API.queryUsersByDepartId(page.value, pageSize.value, prop.departId).then(({data:ret})=> {
      if (ret.status === "10000") {
         data.value = ret.data.list ;
         total.value = ret.data.total ;
      }
  });
}

onMounted(()=> {
  showData() ;
})

</script>

<style scoped>

</style>